<template>
  <span v-if="value?.length" class="text-wrapper" @click="onCopyText">
    <span class="copy-btn"><el-icon :size="11"><CopyDocument /></el-icon></span>
    <span>{{ value }} </span>
  </span>
</template>

<script setup lang="ts">
import { toolCopyText } from '@/utils';
import { ElMessage } from 'element-plus';
import { CopyDocument } from '@element-plus/icons-vue';
defineOptions({
  name: 'BaseTextCopy'
});
const props = withDefaults(
  defineProps<{
    value: any;
  }>(),
  { value: '' }
);
const onCopyText = () => {
  toolCopyText(props.value);
  ElMessage.success('已复制');
};
</script>

<style lang="scss" scoped>
.text-wrapper {
  cursor: pointer;

  .copy-btn {
    display: inline-block;
    margin-right: 2px;
  }

  &:hover {
    .copy-btn {
      color: #4975E9;
    }
  }
}
</style>
